<template>
    <div class="filters">
        <el-row type="flex" class="filters-top" justify="space-between" align="middle">
            <el-col :span="8">
                单程： 
                {{data.info.departCity}} - {{data.info.destCity}} 
                / 
                {{data.info.departDate}}
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="handleAirport">
                    <el-option
                    v-for="(item, index) in data.options.airport"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="flightTimes"  placeholder="起飞时间" @change="handleFlightTimes">
                    <el-option
                    v-for="(item, index) in data.options.flightTimes"
                    :key="index"
                    :label="`${item.from}:00 - ${item.to}:00`"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="company"  placeholder="航空公司" @change="handleCompany">
                    <el-option
                    v-for="(item, index) in data.options.company"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airSize" placeholder="机型" @change="handleAirSize">
                    <el-option
                    v-for="(item, index) in sizeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.size"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
                <div class="filter-cancel">
            筛选：
            <el-button 
                       type="primary" 
                       round 
                       plain 
                       size="mini" 
                       @click="handleFiltersCancel">
                撤销
    		</el-button>
        </div>
        <!-- 其他代码... -->
    </div>
</template>

<script>
export default {
    data(){
        return {

            sizeOptions: [
                {name: "大", size: "L"},
                {name: "中", size: "M"},
                {name: "小", size: "S"},
            ],
      // 其他代码
           airport: '',     //机场
           flightTimes: '',  //出发时间
           company: '',     //航空公司
           airSize: '',   //机型大小
        }
    },

    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    // 其他代码
     methods: {
        // 选择机场时候触发 ,如果用箭头函数要 ，return一下
        handleAirport(value){
          const arr = this.data.flights.filter(v => {
            return v.airport === value;
          })
          //  把数据传回父组件
          this.$emit('changeFilghts',arr);
        },

        // 选择出发时间时候触发
        handleFlightTimes(value){
          // console.log(value.from,value.to)
        //  const [from,to] = value.split(',');
        const from = value.from;
        const to = value.to;
           const arr = this.data.flights.filter( v => {
             const [start] = v.dep_time.split(":");
             console.log(from,to,+start);
             return from <= +start && +start < to;
           });
           this.$emit('changeFilghts',arr);
        },

         // 选择航空公司时候触发
        handleCompany(value){
          // 筛选后的数组传递给父组件
          // console.log(value)
          const arr = this.data.flights.filter(v => {
            return v.airline_name === value;
          })
          //  把数据传回父组件
          this.$emit('changeFilghts',arr);
        },

         // 选择机型时候触发
        handleAirSize(value){
            // console.log(value);
         const arr = this.data.flights.filter(v => {
            return v.plane_size === value;
          })
          //  把数据传回父组件
          this.$emit('changeFilghts',arr);
        },
        
        // 撤销条件时候触发
        handleFiltersCancel(){
            this.airport = "";
            this.flightTimes = "";
            this.company = "";
            this.airSize = "";
           this.$emit('changeFilghts',this.data.flights);
        },
    }
}
</script>